<template>
  <div class="nested-container">
    <el-row>
      <el-col :span="10">
        <div class="grid-content bg-purple">
          <el-row class="space"></el-row>
          <Charts3 class="pieChart" id="id" :option="option"></Charts3>
        </div>
      </el-col>
      <el-col :span="14">
        <div class="grid-content bg-purple-light">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="姓名">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="性别">
                  <el-input v-model="form.gender"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="年龄">
                  <el-input v-model="form.age"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="单号">
                  <el-input v-model="form.id" :style="idStyle"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="住院号">
                  <el-input v-model="form.id2"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="左右利">
                  <el-input v-model="form.hand"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="神志">
                  <el-input v-model="form.mind"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="服药">
                  <el-input v-model="form.medicine"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="门诊医师">
                  <el-input v-model="form.doctor"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="症状">
              <el-checkbox-group v-model="form.type">
                <el-checkbox label="肌肉痉挛" name="type"></el-checkbox>
                <el-checkbox label="失眠" name="type"></el-checkbox>
                <el-checkbox label="失神（自动症）" name="type"></el-checkbox>
                <el-checkbox label="听觉障碍" name="type"></el-checkbox>
                <el-checkbox label="视觉障碍" name="type"></el-checkbox>
                <el-checkbox label="体温异常" name="type"></el-checkbox>
                <el-checkbox label="腹部不适" name="type"></el-checkbox>
                <el-checkbox label="呼吸困难" name="type"></el-checkbox>
                <el-checkbox label="呕吐" name="type"></el-checkbox>
                <el-checkbox label="舌咬伤" name="type"></el-checkbox>
                <el-checkbox label="大小便失禁" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-row>
              <el-col :span="6">
                <el-form-item label="异常率">
                  <el-input v-model="form.result"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="参考值">
                  <el-input v-model="form.limit"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="筛查结果">
              <el-input v-model="form.test_result"></el-input>
            </el-form-item>
            <el-form-item label="临床诊断">
              <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item label="结论">
              <el-input type="textarea"  v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Charts3 from '@/views/nested/component/Charts3'
export default {
  name: 'Nested',
  components: {
    Charts3
  },
  data() {
    return {
      idStyle: {
        width: '150px'
      },
      labelPosition: 'top',
      form: {
        id: '202206041122',
        id2: '103520725',
        hand: '右',
        name: 'Jerry',
        gender: '男',
        age: '27',
        mind: '清醒',
        medicine: 'CBZ',
        doctor: 'white',
        result: '91.16%',
        limit: '>89.28%',
        test_result: '癫痫阳性',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      option: {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: 'pie'
        },
        title: {
          text: '脑电数据分类结果'
        },
        credits: {
          enabled: false
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              format: '<b>{point.name}</b>: {point.percentage:.1f} %',
              style: {
              }
            }
          }
        },
        series: [{
          name: 'Brands',
          colorByPoint: true,
          data: [
            {
              name: '正常',
              y: 8.84,
              sliced: true,
              selected: true,
              color: '#00FF7F'
            },
            {
              name: '癫痫发作间期',
              y: 75.5,
              sliced: true,
              selected: true,
              color: '#FFB6C1'
            },
            {
              name: '癫痫发作期',
              y: 15.66,
              sliced: true,
              selected: true,
              color: '#DC143C'
            }
          ]
        }]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
//.dashboard {
//  &-container {
//    margin: 30px;
//  }
//  &-text {
//    font-size: 30px;
//    line-height: 46px;
//  }
//}
.el-input {
  width: 120px;
}
.space {
  height: 100px;
}
</style>
